<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>血糖指导方案</title>
    <link rel="stylesheet" href="${assets}/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap-table.min.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap-datetimepicker.min.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css">
    <link rel="stylesheet" href="${frames}/Chronic/css/headBase.css">
    <link rel="stylesheet" href="${frames}/Chronic/css/planBase1.css">
    <script src="${assets}/js/jquery-1.9.1.min.js"></script>
    <script src="${assets}/js/bootstrap.min.js"></script>
    <script src="${frames}/js/lib/bootstrap-table.js"></script>
    <script src="${frames}/js/lib/bootstrap-table-zh-CN.js"></script>
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <script src="${newframe}/echarts/echarts-all.js"></script>
    <script src="${newframe}/base/base.js"></script>
    <%-- <script src="${frames}/Chronic/js/ChronicIndex.js" type="text/javascript"></script> --%>
</head>
<body>
<div class="wrap">
    <div class="header">
            <span class="logo">
                <img src="${frames}/Chronic/ChronicImg/logo.png" alt="美康医卫士">
            </span>
        <div class="loginUser">
            <span class="loginU">登录用户:</span>
            <span class="name">${username}</span>
        </div>

    </div>
    <div class="guidelines">
        <div class="guideTitle">
            <h4>血糖指导方案</h4>
            <div class="print" onclick="printPage()">打印</div>
        </div>
        <div class="guideContent">
            <label class="nameLabel">医生姓名:</label><input type="text" value="${username}" class="doctorName">
            <label class="numberLabel">设备序列号:</label><input type="text" value="1354963489635693" class="number">
            <label>执行周期:</label>
            <label>执行周期:</label>
            <span class="startDate">${bloodManager.startTime}</span>
            <span>~</span>
            <span class="endDate">${bloodManager.endTime}</span>
            <%--            <input type="button" value="历史" class="btn btn-primary historyBtn" data-toggle="modal" data-target="#myModal">--%>
            <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>-->
        </div>
        <table class="msgTable">
            <tbody>
            <tr>
                <td class="firstCol">用户信息</td>
                <td><input type="text" name="patientName" value="${signPatientBean.name}"></td>
            </tr>
            <tr>
                <td class="firstCol">药物</td>
                <td><input type="text" drug="" value="${bloodManager.drug}"></td>
            </tr>
            <tr>
                <td class="firstCol">膳食</td>
                <td><input type="text" name="food" value="${bloodManager.food}"></td>
            </tr>
            <tr>
                <td class="firstCol">运动</td>
                <td><input type="text" name="movement" value="${bloodManager.movement}"></td>
            </tr>
            <tr>
                <td class="firstCol">吸烟、饮酒</td>
                <td><input type="text" name="smoking" value="${bloodManager.smoking}"></td>
            </tr>
            <tr>
                <td class="firstCol">心理</td>
                <td><input type="text" name="psychological" value="${bloodManager.psychological}"></td>
            </tr>
            </tbody>
        </table>
        <table class="BloodTabel">
            <thead>
            <tr>
                <th>指标</th>
                <th>理想</th>
                <th>良好</th>
                <th>差</th>
            </tr>
            <tr>
                <td>空腹血糖(mmol/L)</td>
                <td>4.4~5.6</td>
                <td>5.6~6.8</td>
                <td>>7.0</td>
            </tr>
            <tr>
                <td>餐后2h血糖(mmol/L)</td>
                <td>4.4~8.0</td>
                <td>8.0~10.0</td>
                <td>>10.0</td>
            </tr>
            </thead>
        </table>
    </div>
    <%--血糖监控--%>
    <div class="monitoring">
        <div class="monitorTitle">
        <h4>血糖监控</h4>
    </div>
    <div id="BloodlinePic" style="height:290px;"></div>

    <div class="dateTime">
        <div class="datepicker">
            <label>日期：</label>
            <input id="beginDate" type="text" class="lay-date" placeholder="选择日期" readonly>
            &emsp;到&emsp;
            <input id="endDate" type="text" class="lay-date" placeholder="选择日期" readonly>
        </div>
        <div class="form">
            <input type="radio" id="All" checked="checked" name="period" value="0">
            <label name="All" class="checked" for="All">全部</label>
            <input type="radio" id="Top" name="period" value="1">
            <label name="Top" for="Top">空腹</label>
            <input type="radio" id="afterMed" name="period" value="2">
            <label name="afterMed" for="afterMed">餐后2h</label>
        </div>
        <div id="lineTable" class="lineTable">
            <table id="table"
            data-toggle="table"
            data-classes="table table-no-bordered"
            data-click-to-select="true" data-single-select="true" data-height="305">
            <thead>
                <tr>
                    <th data-field="date">测量日期</th>
                    <th data-field="time">测量时间</th>
                    <th data-field="testValue">血糖</th>
                    <th data-field="status" data-formatter="operateFormatter">状态</th>
                    <th data-field="testItemCode" data-formatter="operateCode">检测类型</th>
                </tr>
            </thead>
            </table>
        </div>
    </div>

    </div>
    <div class="clearfix"></div>
    <%--血糖分析--%>
    <div class="analysis">
        <div class="analysisTitle">
            <h4>血糖分析</h4>
        </div>

        <table id="analysisOne">
            <thead>
            <tr>
                <th rowspan="2"></th>
                <th rowspan="2">测量次数</th>
                <th rowspan="2">平均值</th>
                <th colspan="6">测量状况</th>
            </tr>
            <tr>
                <th>正常</th>
                <th>占比</th>
                <th>偏高</th>
                <th>占比</th>
                <th>偏低</th>
                <th>占比</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>早餐前</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>早餐后</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>午餐前</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>午餐后</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>晚餐前</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>晚餐后</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>睡前</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="end">
        <div class="endTitle">
            <h4>结束</h4>
            <div class="print" onclick="printPage()">打印</div>
        </div>
        <div class="summary">
            <div class="summaryarea">
                <label>小节</label>
                <input type="text">
            </div>
            <div class="footer">
                <span>2012-12-25</span>
                <span>时间&nbsp;:</span>
                <span class="mgr">${username}</span>
                <span>医生&nbsp;:</span>
            </div>
        </div>
    </div>
    <!--模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">请选择历史执行周期</h4>
                </div>
                <div class="modal-body">
                    <div class="datepicker">
                        <label>日期：</label>
                        <input type="text" class="lay-date" placeholder="选择日期"
                               onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" readonly>
                        &emsp;到&emsp;
                        <input type="text" class="lay-date" placeholder="选择日期"
                               onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" readonly>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function drawChart(data_x, data_a, data_b) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('BloodlinePic'));
        option = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    var res = '';
                    for (var i = 0, l = params.length; i < l; i++) {
                        res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                    }
                    setTimeout(function () {
                        // 仅为了模拟异步回调
                        callback(ticket, res);
                    }, 50)
                    return 'loading';
                }
            },
            legend: {
                data: ['空腹血糖', '餐后2h血糖']
            },

            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: [1, 2, 3, 4, 5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '测量时间',
                    type: 'bar',
//                    stack: '总量',
                    data: data_x
                },
                {
                    name: '空腹血糖',
                    type: 'line',
                    stack: '总量',
                    data: data_a
                },
                {
                    name: '餐后2h血糖',
                    type: 'line',
//                    stack: '总量',
                    data: data_b
                }
            ]
        };
        // 为echarts对象加载数据
        myChart.setOption(option);
    }
    function getChartData() {

    }
    $(document).ready(function () {
        var data_A = '${systolicList}';
        var data_B = '${diastolicList}';
        $('.dateTime .form label').click(function () {
            //alert(78);
            var radioId = $(this).attr('name');
            $('.form label').removeAttr('class') && $(this).attr('class', 'checked');
            $(this).css('background', 'url(${frames}/Chronic/ChronicImg/bg1.png) no-repeat left center').siblings('label').css('background', 'url(${frames}/Chronic/ChronicImg/bg.png) no-repeat left center');
            $('input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
        });
        $("input[name=period]").click(function () {
            initLineTable();
        });
        initLayDate('#beginDate')
        initLayDate('#endDate')
        //初始化表格
        //设置默认时间
        var date = new Date();
        var date2 = new Date(date - 1000 * 60 * 60 * 24 * 30);
        $("#beginDate").val(date2.getFullYear() + '-' + coverZero(date2.getMonth() + 1) + '-' + coverZero(date2.getDate()));
        $("#endDate").val(date.getFullYear() + '-' + coverZero(date.getMonth() + 1) + '-' + coverZero(date.getDate()));
        initLineTable();
    });
    function assemDate(data) {
        var res = [];
        for (var i = 0; i < data.rows.length; i++) {
            res.push(data.rows[i].date + '&nbsp;' + data.rows[i].time);
        }
        return res;
    }


    function initLineTable() {
        var idCard = '${idCard}';
        //获得选中radio的值
        var timeType = $("input[name='period']:checked").val();
        console.log(timeType);
        $('#table').bootstrapTable('destroy');
        $("#table").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            url: "${URL_CHRONIC_SEARCHBSLIST}", //获取数据的Servlet地址
            search: false,  //是否启用查询
            sidePagination: "server", //表示服务端请求
            sortable: true,//排序
            cache: false,//禁用缓存
            pagination: true,//启动分页
            pageSize: 20,
            pageNumber:1 ,
            queryParamsType: "undefined",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    idCard: idCard,
                    beginDate: $("#beginDate").val(),
                    endDate: $("#endDate").val(),
                    timeType: timeType,
                    iDisplayLength: params.pageSize,
                    iDisplayStart: (params.pageNumber-1) * params.pageSize
                };
                return param;
            },
            responseHandler: function(res) {
                return {
                    "total": res.total,//总页数
                    "rows": res.rows   //数据
                };
            },
            onLoadSuccess: function (data) {  //加载成功时执行
                var res1 = [];
                var res2 = [];
                for (var i = 0; i < data.rows.length; i++) {
                    if (data.rows[i].testItemCode == '105001') {
                        res1.push(data.rows[i].testValue);

                    } else if (data.rows[i].testItemCode == '105002') {
                        res2.push(data.rows[i].testValue);
                    }

                }
                drawChart(assemDate(data), res1, res2);

            },
            onLoadError: function () {  //加载失败时执行
                alert("加载数据失败");
            },
        });
    }
    function initLayDate(id) {
        laydate({
            elem: id,
            istime: true,
            format: 'YYYY-MM-DD',
            choose: function (dates) { //选择好日期的回调
                initLineTable();
            }
        })
    }
    function operateFormatter(value, row, index) {
        if (value == '0') {
            return [
                '<img src="${frames}/Chronic/ChronicImg/down.png" alt="">'
            ].join('');
        } else if (value == '2') {
            return [
                '<img src="${frames}/Chronic/ChronicImg/up.png" alt="">'
            ].join('');
        }
    }
    function operateCode(value, row, index) {
        if (value == '105001') {
            return '空腹血糖';
        } else if (value == "105002") {
            return '餐后2h血糖';
        }
    }
</script>
</body>
</html>